<!--
 * @Description: 
 * @Autor: zhangbing
 * @Date: 2021-07-28 20:45:09
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-07-28 21:22:45
-->

<template>
  <div>
    <counter-result :result="result"></counter-result>
    <div>
      <counter-button
        innerText="+"
        action="PLUS"
        @dispatch="dispatch"
      ></counter-button>
      <counter-button
        innerText="-"
        action="MINUS"
        @dispatch="dispatch"
      ></counter-button>
    </div>
  </div>
</template>

<script>
import CounterResult from "./Result.vue";
import CounterButton from "./Button.vue";

import dispatch from '@/dispatchers/counter'
export default {
  name: "Counter",
  components: {
    CounterResult,
    CounterButton,
  },
  data() {
    return {
      result: 0,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // compute(action) {
    //   switch (action) {
    //     case "PLUS":
    //       this.result += 1;
    //       break;
    //     case "MINUS":
    //       this.result -= 1;
    //       break;
    //     default:
    //       break;
    //   }
    // },

    dispatch(...args) {
      dispatch(this)(...args)
    }
  },
};
</script>

<style>
</style>

